Package-level declarations

Types

Link copied to clipboard

The direction in which a StylishSpeedDial fans out its actions.

Link copied to clipboard
interface SpeedDialScope

The scope in which each StylishSpeedDial action is composed.

Link copied to clipboard
Link copied to clipboard

The visual style of a StylishCard (and the connected card family).

Link copied to clipboard
Link copied to clipboard

The predefined size of a StylishFab.

Link copied to clipboard

Default values and factory methods for StylishOutlinedTextField.

Link copied to clipboard

Placement of a StylishTooltip relative to its anchor.

Functions

Link copied to clipboard
fun StylishAvatar(initials: String = "", modifier: Modifier = Modifier, size: Dp = 40.dp, containerColor: Color = MaterialTheme.colorScheme.primaryContainer, contentColor: Color = MaterialTheme.colorScheme.onPrimaryContainer, avatarImage: @Composable () -> Unit? = null, content: @Composable () -> Unit? = null)

A circular avatar that shows a person's initials, an arbitrary image, or caller-supplied content.

Link copied to clipboard
fun StylishBadge(modifier: Modifier = Modifier, containerColor: Color = MaterialTheme.colorScheme.error, contentColor: Color = MaterialTheme.colorScheme.onError, shape: Shape = CircleShape, content: @Composable () -> Unit)

A small notification badge that communicates a count or status at a glance. Intended for the badge slot of a navigation item (see StylishNavigationBar) and similar compact contexts such as icon buttons or tab bars.

Link copied to clipboard
fun StylishBadgedBox(badge: @Composable BoxScope.() -> Unit, modifier: Modifier = Modifier, content: @Composable BoxScope.() -> Unit)

A layout box that positions a badge relative to its content, wrapping the Material 3 BadgedBox so it can be themed consistently with the rest of Stylish UI.

Link copied to clipboard
fun StylishButton(onClick: () -> Unit, modifier: Modifier = Modifier, variant: StylishButtonVariant = StylishButtonVariant.Filled, enabled: Boolean = true, colors: ButtonColors? = null, shape: Shape = RoundedCornerShape(StylishTheme.dimensions.connectedCornerRadius), border: BorderStroke? = null, elevation: ButtonElevation? = null, interactionSource: MutableInteractionSource? = null, contentPadding: PaddingValues = PaddingValues( horizontal = DefaultStylishDimensions.controlPadding, vertical = DefaultStylishDimensions.controlVerticalPadding, ), minHeight: Dp = DefaultStylishDimensions.buttonMinHeight, contentArrangement: Arrangement.Horizontal = Arrangement.Center, isLoading: Boolean = false, leadingContent: @Composable RowScope.() -> Unit? = null, trailingContent: @Composable RowScope.() -> Unit? = null, content: @Composable RowScope.() -> Unit)

A standalone Stylish button with the same visual language as the connected-button family — grouped-container colors, interactive elevation, a hairline outline, and a 52 dp minimum height — but without any connected-group geometry. Use this when a single button is needed outside a StylishConnectedButtonRow, StylishConnectedButtonColumn, or StylishConnectedButtonGrid.

Link copied to clipboard
fun StylishCard(modifier: Modifier = Modifier, onClick: () -> Unit? = null, onLongClick: () -> Unit? = null, enabled: Boolean = true, shape: Shape = RoundedCornerShape(StylishTheme.dimensions.connectedCornerRadius), containerColor: Color? = null, contentColor: Color? = null, minHeight: Dp = 77.dp, horizontalPadding: Dp = 16.dp, verticalPadding: Dp = 12.dp, title: String = "", supportingText: String = "", titleStyle: TextStyle = MaterialTheme.typography.titleLarge, titleMaxLines: Int = 1, titleOverflow: TextOverflow = TextOverflow.Ellipsis, supportingTextStyle: TextStyle = MaterialTheme.typography.bodySmall, supportingTextMaxLines: Int = 1, supportingTextOverflow: TextOverflow = TextOverflow.Ellipsis, contentSpacing: Dp = StylishTheme.dimensions.itemSpacing, titleSpacing: Dp = StylishTheme.dimensions.inlineSpacing, variant: StylishCardVariant = StylishCardVariant.Elevated, border: BorderStroke? = null, interactionSource: MutableInteractionSource? = null, leadingContent: @Composable () -> Unit? = null, trailingContent: @Composable () -> Unit? = null, content: @Composable () -> Unit? = null)

A standalone card for presenting a single piece of grouped content. Supports tap and long-press interactions; long-press triggers haptic feedback. When neither onClick nor onLongClick is provided, the card renders flat (zero elevation) and ignores pointer input.

Link copied to clipboard
fun StylishCheckbox(checked: Boolean, onCheckedChange: (Boolean) -> Unit?, modifier: Modifier = Modifier, enabled: Boolean = true, colors: CheckboxColors = CheckboxDefaults.colors(), interactionSource: MutableInteractionSource? = null)

A checkbox for marking an independent option as selected or not, wrapping the Material 3 Checkbox so it can be themed consistently with the rest of Stylish UI. Use a checkbox when the selection is confirmed elsewhere (e.g. on form submit); for immediate on/off behaviour prefer StylishSwitch, and for mutually exclusive choices prefer StylishRadioButton.

Link copied to clipboard
fun StylishChip(label: String = "", onClick: () -> Unit? = null, modifier: Modifier = Modifier, variant: StylishChipVariant = StylishChipVariant.Assist, selected: Boolean = false, enabled: Boolean = true, interactionSource: MutableInteractionSource? = null, shape: Shape = RoundedCornerShape(StylishTheme.dimensions.connectedCornerRadius), labelMaxLines: Int = 1, labelOverflow: TextOverflow = TextOverflow.Ellipsis, labelStyle: TextStyle = MaterialTheme.typography.labelLarge, selectedContainerColor: Color = MaterialTheme.colorScheme.primary, selectedContentColor: Color = MaterialTheme.colorScheme.onPrimary, unselectedContainerColor: Color? = null, unselectedContentColor: Color = MaterialTheme.colorScheme.onSurfaceVariant, disabledContainerColor: Color = MaterialTheme.colorScheme.surfaceVariant, disabledContentColor: Color = MaterialTheme.colorScheme.onSurfaceVariant, contentPadding: PaddingValues = PaddingValues(horizontal = 14.dp, vertical = 10.dp), contentSpacing: Dp = StylishTheme.dimensions.inlineSpacing, leadingContent: @Composable RowScope.() -> Unit? = null, trailingContent: @Composable RowScope.() -> Unit? = null, content: @Composable RowScope.() -> Unit? = null)

A standalone Stylish chip with the same visual language as the connected-chip family — animated selection colors, Role.Tab semantics, interactive elevation, and a haptic pulse on tap — but without any connected-group geometry. Use this when a single chip is needed outside a StylishConnectedChipRow, StylishConnectedChipColumn, or StylishConnectedChipGrid.

Link copied to clipboard
fun StylishCircularProgressIndicator(modifier: Modifier = Modifier, color: Color = MaterialTheme.colorScheme.primary, trackColor: Color = MaterialTheme.colorScheme.surfaceVariant, strokeWidth: Dp = 4.dp, strokeCap: StrokeCap = StrokeCap.Round, progress: () -> Float? = null)

A circular progress indicator styled with the Stylish theme. Wraps CircularProgressIndicator with theme-aware defaults for color, track color, and stroke cap.

Link copied to clipboard
fun StylishCode(text: String, modifier: Modifier = Modifier, containerColor: Color = MaterialTheme.colorScheme.surfaceVariant, contentColor: Color = MaterialTheme.colorScheme.onSurfaceVariant, shape: Shape = RectangleShape, textStyle: TextStyle = MaterialTheme.typography.bodySmall.copy( fontFamily = FontFamily.Monospace, ))

A monospaced inline code display — the web "Code" pattern from Chakra UI and Ant Design.

Link copied to clipboard
fun StylishConnectedCard(title: String = "", supportingText: String = "", modifier: Modifier = Modifier, shape: Shape = connectedShape(ConnectedCorners.Standalone), outlineEdges: ConnectedEdges = ConnectedEdges.All, outlineCorners: ConnectedCorners = ConnectedCorners.Standalone, containerColor: Color? = null, contentColor: Color? = null, disabledContainerColor: Color = MaterialTheme.colorScheme.surfaceVariant, disabledContentColor: Color = MaterialTheme.colorScheme.onSurfaceVariant, titleStyle: TextStyle = MaterialTheme.typography.titleLarge, supportingTextStyle: TextStyle = MaterialTheme.typography.bodySmall, supportingTextColor: Color? = null, minHeight: Dp = 77.dp, horizontalPadding: Dp = 16.dp, verticalPadding: Dp = 12.dp, contentSpacing: Dp = StylishTheme.dimensions.itemSpacing, titleSpacing: Dp = StylishTheme.dimensions.inlineSpacing, enabled: Boolean = true, onClick: () -> Unit? = null, onLongClick: () -> Unit? = null, titleMaxLines: Int = 1, titleOverflow: TextOverflow = TextOverflow.Ellipsis, supportingTextMaxLines: Int = 1, supportingTextOverflow: TextOverflow = TextOverflow.Ellipsis, variant: StylishCardVariant = StylishCardVariant.Elevated, border: BorderStroke? = null, interactionSource: MutableInteractionSource? = null, leadingContent: @Composable () -> Unit? = null, trailingContent: @Composable () -> Unit? = null, content: @Composable () -> Unit? = null)

A connected card that shares edges and corner radii with adjacent cards, forming a visually continuous group. Supports tap and long-press interactions; long-press triggers haptic feedback. When neither onClick nor onLongClick is provided, the card renders flat (zero elevation) and ignores pointer input.

Link copied to clipboard
fun StylishContentSpacer(modifier: Modifier = Modifier)

A vertical StylishSpacer using StylishTheme.dimensions.contentSpacing (16 dp) — the medium Rhythm step, for distinct content blocks within a section.

Link copied to clipboard
fun StylishDialogSurface(onDismiss: () -> Unit, modifier: Modifier = Modifier, animate: Boolean = true, shape: Shape = RoundedCornerShape(StylishTheme.dimensions.connectedCornerRadius), containerColor: Color? = null, horizontalPadding: Dp = 16.dp, contentColor: Color? = null, properties: DialogProperties = DialogProperties(usePlatformDefaultWidth = false), windowInsets: WindowInsets = WindowInsets.safeDrawing, content: @Composable ColumnScope.() -> Unit)

A modal dialog container that enters with a combined scale-and-fade animation. Wraps content in a full-width Card inside a platform Dialog whose properties default to DialogProperties(usePlatformDefaultWidth = false), so the surface stretches to the available width minus horizontalPadding.

Link copied to clipboard
fun StylishDotIndicator(pageCount: Int, currentPage: Int, modifier: Modifier = Modifier, activeSize: Dp = 8.dp, inactiveSize: Dp = 6.dp, spacing: Dp = 4.dp, activeColor: Color = MaterialTheme.colorScheme.onSurface, inactiveColor: Color = MaterialTheme.colorScheme.outlineVariant)

A horizontal row of dots indicating the current page in a paged container (e.g. a pager). The active dot uses activeSize and activeColor; inactive dots use inactiveSize and inactiveColor. Size changes are animated so the active dot smoothly grows or shrinks as the page changes.

Link copied to clipboard
fun StylishDragHandle(modifier: Modifier = Modifier, width: Dp = 32.dp, height: Dp = 4.dp, shape: Shape = MaterialTheme.shapes.extraLarge, color: Color = MaterialTheme.colorScheme.onSurfaceVariant)

The optional visual marker placed on top of a bottom sheet to indicate that it may be dragged, wrapping the Material 3 BottomSheetDefaults.DragHandle with the theme's default look.

Link copied to clipboard
fun StylishDropdownMenu(expanded: Boolean, onDismissRequest: () -> Unit, modifier: Modifier = Modifier, offset: DpOffset = DpOffset.Zero, properties: PopupProperties = PopupProperties(focusable = true), shape: Shape = MaterialTheme.shapes.extraSmall, containerColor: Color = MaterialTheme.colorScheme.surfaceContainer, content: @Composable ColumnScope.() -> Unit)

A dropdown menu that shows a list of choices on a temporary surface, wrapping the Material 3 DropdownMenu with Stylish defaults.

Link copied to clipboard
fun StylishDropdownMenuItem(text: @Composable () -> Unit, onClick: () -> Unit, modifier: Modifier = Modifier, leadingIcon: @Composable () -> Unit? = null, trailingIcon: @Composable () -> Unit? = null, enabled: Boolean = true)

A single selectable row inside a StylishDropdownMenu, wrapping the Material 3 DropdownMenuItem.

Link copied to clipboard
fun ExposedDropdownMenuBoxScope.StylishExposedDropdownMenu(expanded: Boolean, onDismissRequest: () -> Unit, modifier: Modifier = Modifier, scrollState: ScrollState = rememberScrollState(), matchAnchorWidth: Boolean = true, shape: Shape = MenuDefaults.shape, containerColor: Color = MenuDefaults.containerColor, tonalElevation: Dp = MenuDefaults.TonalElevation, shadowElevation: Dp = MenuDefaults.ShadowElevation, border: BorderStroke? = null, content: @Composable ColumnScope.() -> Unit)

The menu of a StylishExposedDropdownMenuBox, wrapping the Material 3 ExposedDropdownMenuDefaults.ExposedDropdownMenu.

Link copied to clipboard
fun StylishExposedDropdownMenuBox(expanded: Boolean, onExpandedChange: (Boolean) -> Unit, modifier: Modifier = Modifier, content: @Composable ExposedDropdownMenuBoxScope.() -> Unit)

A box that anchors an exposed dropdown menu to a text field, wrapping the Material 3 ExposedDropdownMenuBox.

Link copied to clipboard
fun StylishExtendedFab(text: String, icon: ImageVector, contentDescription: String? = null, onClick: () -> Unit, modifier: Modifier = Modifier, enabled: Boolean = true, containerColor: Color? = null, contentColor: Color? = null, shape: Shape = RoundedCornerShape(StylishTheme.dimensions.floatingCornerRadius), border: BorderStroke? = null, tonalElevation: Dp = StylishTheme.dimensions.floatingElevation, shadowElevation: Dp = StylishTheme.dimensions.floatingElevation, textStyle: TextStyle = MaterialTheme.typography.labelLarge, interactionSource: MutableInteractionSource? = null, iconContent: @Composable () -> Unit? = null, visibilityState: VisibilityState = VisibilityState.AlwaysVisible)

A pill-shaped floating action button that pairs an icon with a text label, floating above content with tonal and shadow elevation. Renders a horizontal Row of icon + label inside a RoundedCornerShape surface with a hairline outline border.

Link copied to clipboard
fun StylishFab(imageVector: ImageVector, contentDescription: String? = null, onClick: () -> Unit, modifier: Modifier = Modifier, enabled: Boolean = true, containerColor: Color? = null, contentColor: Color? = null, shape: Shape? = null, sizeVariant: StylishFabSize = StylishFabSize.Regular, size: Dp? = null, border: BorderStroke? = null, tonalElevation: Dp = StylishTheme.dimensions.floatingElevation, shadowElevation: Dp = StylishTheme.dimensions.floatingElevation, interactionSource: MutableInteractionSource? = null, iconContent: @Composable () -> Unit? = null, visibilityState: VisibilityState = VisibilityState.AlwaysVisible)

A circular floating action button that floats above content with tonal and shadow elevation (floatingElevation, 2 dp). Renders a single icon inside a CircleShape surface with a hairline outline border.

Link copied to clipboard
fun StylishFilledIconButton(onClick: () -> Unit, modifier: Modifier = Modifier, enabled: Boolean = true, shape: Shape = IconButtonDefaults.filledShape, colors: IconButtonColors = IconButtonDefaults.filledIconButtonColors(), interactionSource: MutableInteractionSource? = null, content: @Composable () -> Unit)

A filled icon button with a primary-container background, wrapping the Material 3 FilledIconButton with the theme's default colors.

Link copied to clipboard
fun StylishFilledIconToggleButton(checked: Boolean, onCheckedChange: (Boolean) -> Unit, modifier: Modifier = Modifier, enabled: Boolean = true, shape: Shape = IconButtonDefaults.filledShape, colors: IconToggleButtonColors = IconButtonDefaults.filledIconToggleButtonColors(), interactionSource: MutableInteractionSource? = null, content: @Composable () -> Unit)

A filled icon toggle button with a primary-container background, wrapping the Material 3 FilledIconToggleButton with the theme's default colors.

Link copied to clipboard
fun StylishFilledTextField(value: String, onValueChange: (String) -> Unit, label: String = "", placeholder: String = "", modifier: Modifier = Modifier, minLines: Int = 1, maxLines: Int = if (minLines == 1) 1 else Int.MAX_VALUE, isError: Boolean = false, errorMessage: String? = null, leadingIcon: @Composable () -> Unit? = null, trailingIcon: @Composable () -> Unit? = null, textStyle: TextStyle = MaterialTheme.typography.bodyLarge, shape: Shape = TextFieldDefaults.shape, colors: TextFieldColors? = null, enabled: Boolean = true, readOnly: Boolean = false, keyboardOptions: KeyboardOptions = KeyboardOptions.Default, keyboardActions: KeyboardActions = KeyboardActions.Default, visualTransformation: VisualTransformation = VisualTransformation.None, singleLine: Boolean = false, interactionSource: MutableInteractionSource? = null, prefix: @Composable () -> Unit? = null, suffix: @Composable () -> Unit? = null, supportingContent: @Composable () -> Unit? = null)

A filled text field designed for form input, with built-in label, placeholder, and error-message support. Wraps Material's TextField (the filled variant) with the same layout contract as StylishFormTextField, which is the outlined counterpart.

Link copied to clipboard
fun StylishFilledTonalIconButton(onClick: () -> Unit, modifier: Modifier = Modifier, enabled: Boolean = true, shape: Shape = IconButtonDefaults.filledShape, colors: IconButtonColors = IconButtonDefaults.filledTonalIconButtonColors(), interactionSource: MutableInteractionSource? = null, content: @Composable () -> Unit)

A filled tonal icon button with a secondary-container background, wrapping the Material 3 FilledTonalIconButton with the theme's default colors.

Link copied to clipboard
fun StylishFilledTonalIconToggleButton(checked: Boolean, onCheckedChange: (Boolean) -> Unit, modifier: Modifier = Modifier, enabled: Boolean = true, shape: Shape = IconButtonDefaults.filledShape, colors: IconToggleButtonColors = IconButtonDefaults.filledTonalIconToggleButtonColors(), interactionSource: MutableInteractionSource? = null, content: @Composable () -> Unit)

A filled tonal icon toggle button with a secondary-container background, wrapping the Material 3 FilledTonalIconToggleButton with the theme's default colors.

Link copied to clipboard
fun StylishFormTextField(value: String, onValueChange: (String) -> Unit, label: String = "", placeholder: String = "", modifier: Modifier = Modifier, minLines: Int = 1, maxLines: Int = if (minLines == 1) 1 else Int.MAX_VALUE, isError: Boolean = false, errorMessage: String? = null, leadingIcon: @Composable () -> Unit? = null, trailingIcon: @Composable () -> Unit? = null, textStyle: TextStyle = MaterialTheme.typography.bodyLarge, shape: Shape = OutlinedTextFieldDefaults.shape, colors: TextFieldColors? = null, enabled: Boolean = true, readOnly: Boolean = false, keyboardOptions: KeyboardOptions = KeyboardOptions.Default, keyboardActions: KeyboardActions = KeyboardActions.Default, visualTransformation: VisualTransformation = VisualTransformation.None, labelContent: @Composable () -> Unit? = null, placeholderContent: @Composable () -> Unit? = null, supportingContent: @Composable () -> Unit? = null, fieldModifier: Modifier = Modifier, cursorBrush: Brush = SolidColor(Color.Black), singleLine: Boolean = false, interactionSource: MutableInteractionSource? = null, prefix: @Composable () -> Unit? = null, suffix: @Composable () -> Unit? = null)

An outlined text field designed for form input, with built-in label, placeholder, and error-message support. Wraps Material's OutlinedTextField inside a Column and fills the available width.

Link copied to clipboard
fun StylishHorizontalDivider(modifier: Modifier = Modifier, thickness: Dp = StylishTheme.dimensions.outlineWidth, color: Color = MaterialTheme.colorScheme.outlineVariant)

A horizontal rule styled with the Stylish hairline outline. Wraps HorizontalDivider with StylishTheme.dimensions.outlineWidth as the default thickness and MaterialTheme.colorScheme.outlineVariant as the default color, keeping dividers visually consistent with connected outlines.

Link copied to clipboard
fun StylishHorizontalSpacer(spacing: Dp = StylishTheme.dimensions.inlineSpacing, modifier: Modifier = Modifier)

A horizontal spacing element that inserts a fixed-width gap between siblings, backed by the Stylish Rhythm spacing scale. Use it for one-off horizontal gaps; for the standard smallest step (icon-to-label), prefer StylishInlineSpacer.

Link copied to clipboard
fun StylishIconButton(imageVector: ImageVector, contentDescription: String? = null, onClick: () -> Unit, modifier: Modifier = Modifier, enabled: Boolean = true, active: Boolean = false, containerColor: Color? = null, contentColor: Color? = null, shape: Shape? = null, border: BorderStroke? = BorderStroke( StylishTheme.dimensions.outlineWidth, MaterialTheme.colorScheme.outlineVariant, ), minWidth: Dp = DefaultStylishDimensions.iconButtonMinSize, minHeight: Dp = DefaultStylishDimensions.iconButtonMinSize, interactionSource: MutableInteractionSource? = null, iconContent: @Composable () -> Unit? = null)

A circular icon button rendered on an outlined surface with a subtle shadow. Supports an active state that inverts the color scheme to primary/onPrimary, suitable for toggle-style controls.

Link copied to clipboard
fun StylishIconToggleButton(checked: Boolean, onCheckedChange: (Boolean) -> Unit, modifier: Modifier = Modifier, enabled: Boolean = true, colors: IconToggleButtonColors = IconButtonDefaults.iconToggleButtonColors(), interactionSource: MutableInteractionSource? = null, shape: Shape = IconButtonDefaults.standardShape, content: @Composable () -> Unit)

A standard icon toggle button that switches between a checked and an unchecked state, wrapping the Material 3 IconToggleButton with the theme's default colors.

Link copied to clipboard
fun StylishInlineSpacer(modifier: Modifier = Modifier)

A horizontal StylishSpacer using StylishTheme.dimensions.inlineSpacing (4 dp) — the smallest Rhythm step, for icon-to-label gaps.

Link copied to clipboard
fun StylishItemSpacer(modifier: Modifier = Modifier)

A vertical StylishSpacer using StylishTheme.dimensions.itemSpacing (8 dp) — the small Rhythm step, for items within a group.

Link copied to clipboard
fun StylishKbd(text: String, modifier: Modifier = Modifier, containerColor: Color = MaterialTheme.colorScheme.surfaceContainerHigh, contentColor: Color = MaterialTheme.colorScheme.onSurfaceVariant, textStyle: TextStyle = MaterialTheme.typography.labelMedium, shape: Shape = RoundedCornerShape(6.dp), contentPadding: PaddingValues = PaddingValues(horizontal = 6.dp, vertical = 2.dp))

A keyboard-key indicator (kbd) showing a single shortcut label, in the style of shadcn/ui and Chakra UI's Kbd component.

Link copied to clipboard
fun StylishLinearProgressIndicator(modifier: Modifier = Modifier, color: Color = MaterialTheme.colorScheme.primary, trackColor: Color = MaterialTheme.colorScheme.surfaceVariant, progress: () -> Float? = null, strokeCap: StrokeCap = StrokeCap.Butt, gapSize: Dp = 0.dp, drawStopIndicator: DrawScope.() -> Unit? = null)

A linear progress indicator styled with the Stylish theme. Wraps LinearProgressIndicator with theme-aware defaults.

Link copied to clipboard
fun StylishNumberInput(value: Int, onValueChange: (Int) -> Unit, modifier: Modifier = Modifier, enabled: Boolean = true, range: IntRange = 0..Int.MAX_VALUE, step: Int = 1, label: String = "", isError: Boolean = false, errorMessage: String? = null, leadingIcon: @Composable () -> Unit? = null, trailingIcon: @Composable () -> Unit? = null, textStyle: TextStyle = MaterialTheme.typography.bodyLarge, shape: Shape = RoundedCornerShape(DefaultStylishDimensions.connectedCornerRadius), colors: TextFieldColors? = null, interactionSource: MutableInteractionSource? = null)

A numeric stepper input combining a text field with minus/plus buttons, for choosing an integer within range.

Link copied to clipboard
fun StylishOutlinedIconButton(onClick: () -> Unit, modifier: Modifier = Modifier, enabled: Boolean = true, shape: Shape = IconButtonDefaults.outlinedShape, colors: IconButtonColors = IconButtonDefaults.outlinedIconButtonColors(), border: BorderStroke? = IconButtonDefaults.outlinedIconButtonBorder(enabled), interactionSource: MutableInteractionSource? = null, content: @Composable () -> Unit)

An outlined icon button with a hairline border, wrapping the Material 3 OutlinedIconButton with the theme's default colors.

Link copied to clipboard
fun StylishOutlinedIconToggleButton(checked: Boolean, onCheckedChange: (Boolean) -> Unit, modifier: Modifier = Modifier, enabled: Boolean = true, shape: Shape = IconButtonDefaults.outlinedShape, colors: IconToggleButtonColors = IconButtonDefaults.outlinedIconToggleButtonColors(), border: BorderStroke? = IconButtonDefaults.outlinedIconToggleButtonBorder(enabled, checked), interactionSource: MutableInteractionSource? = null, content: @Composable () -> Unit)

An outlined icon toggle button with a hairline border, wrapping the Material 3 OutlinedIconToggleButton with the theme's default colors.

Link copied to clipboard
fun StylishOutlinedTextField(value: String, onValueChange: (String) -> Unit, modifier: Modifier = Modifier, label: @Composable () -> Unit? = null, placeholder: @Composable () -> Unit? = null, leadingIcon: @Composable () -> Unit? = null, trailingIcon: @Composable () -> Unit? = null, supportingText: @Composable () -> Unit? = null, isError: Boolean = false, enabled: Boolean = true, readOnly: Boolean = false, singleLine: Boolean = true, maxLines: Int = if (singleLine) 1 else Int.MAX_VALUE, minLines: Int = 1, keyboardOptions: KeyboardOptions = KeyboardOptions.Default, keyboardActions: KeyboardActions = KeyboardActions.Default, visualTransformation: VisualTransformation = VisualTransformation.None, shape: Shape = StylishTheme.shapes.medium, colors: TextFieldColors = StylishOutlinedTextFieldDefaults.colors(), interactionSource: MutableInteractionSource? = null)

An outlined text field with Stylish styling, designed for form input with built-in label, placeholder, and supporting text support. Wraps Material's OutlinedTextField with Stylish theme integration.

Link copied to clipboard
fun StylishPinInput(value: String, onValueChange: (String) -> Unit, modifier: Modifier = Modifier, length: Int = 6, enabled: Boolean = true, isError: Boolean = false, filledColor: Color = MaterialTheme.colorScheme.primaryContainer, emptyColor: Color = MaterialTheme.colorScheme.surfaceVariant, errorColor: Color = MaterialTheme.colorScheme.error, boxSize: Dp = 48.dp, spacing: Dp = StylishTheme.dimensions.itemSpacing, interactionSource: MutableInteractionSource? = null)

A one-time password (OTP) / PIN entry field showing length boxes, each holding one digit of value.

Link copied to clipboard
fun StylishRadioButton(selected: Boolean, onClick: () -> Unit?, modifier: Modifier = Modifier, enabled: Boolean = true, colors: RadioButtonColors = RadioButtonDefaults.colors(), interactionSource: MutableInteractionSource? = null)

A radio button for selecting exactly one option from a group, wrapping the Material 3 RadioButton so it can be themed consistently with the rest of Stylish UI. Use radio buttons for mutually exclusive choices; for immediate on/off behaviour prefer StylishSwitch, and for independent yes/no marks prefer StylishCheckbox.

Link copied to clipboard
fun StylishRangeSlider(value: ClosedFloatingPointRange<Float>, onValueChange: (ClosedFloatingPointRange<Float>) -> Unit, modifier: Modifier = Modifier, enabled: Boolean = true, valueRange: ClosedFloatingPointRange<Float> = 0f..1f, steps: Int = 0, onValueChangeFinished: () -> Unit? = null, colors: SliderColors = SliderDefaults.colors( thumbColor = MaterialTheme.colorScheme.primary, activeTrackColor = MaterialTheme.colorScheme.primary, inactiveTrackColor = MaterialTheme.colorScheme.surfaceVariant, ), interactionSource: MutableInteractionSource? = null)

A range slider for selecting both endpoints of a value range, wrapping the Material 3 RangeSlider with Stylish defaults.

Link copied to clipboard
fun StylishRating(value: Int, onValueChange: (Int) -> Unit, modifier: Modifier = Modifier, max: Int = 5, enabled: Boolean = true, size: Dp = 28.dp, filledColor: Color = MaterialTheme.colorScheme.primary, emptyColor: Color = MaterialTheme.colorScheme.surfaceVariant, interactionSource: MutableInteractionSource? = null)

A star rating selector for choosing a value from 1 to max stars.

Link copied to clipboard
fun StylishRoundedIconButton(imageVector: ImageVector, contentDescription: String? = null, onClick: () -> Unit, modifier: Modifier = Modifier, enabled: Boolean = true, active: Boolean = false, containerColor: Color? = null, contentColor: Color? = null, shape: Shape = RoundedCornerShape(DefaultStylishDimensions.floatingCornerRadius), border: BorderStroke? = BorderStroke( StylishTheme.dimensions.outlineWidth, MaterialTheme.colorScheme.outlineVariant, ), minWidth: Dp = DefaultStylishDimensions.roundedIconButtonMinWidth, minHeight: Dp = 48.dp, interactionSource: MutableInteractionSource? = null, iconContent: @Composable () -> Unit? = null)

A pill-shaped icon button rendered on a wide rounded-rectangle surface. Behaves like StylishIconButton but uses a horizontally elongated shape, making it a good fit for toolbars or action rows where a wider tap target is desirable.

Link copied to clipboard
fun StylishSectionSpacer(modifier: Modifier = Modifier)

A vertical StylishSpacer using StylishTheme.dimensions.sectionSpacing (32 dp) — the large Rhythm step, for top-level page sections.

Link copied to clipboard
fun StylishSectionTitle(title: String, modifier: Modifier = Modifier, maxLines: Int = Int.MAX_VALUE, overflow: TextOverflow = TextOverflow.Ellipsis, textStyle: TextStyle = MaterialTheme.typography.titleMedium, color: Color = MaterialTheme.colorScheme.primary, verticalPadding: Dp = 20.dp)

A section heading label rendered in the primary color. Provides consistent typography and vertical rhythm for group headers within lists, forms, and detail screens. The text is announced as a heading by accessibility services.

Link copied to clipboard
fun StylishSecureTextField(state: TextFieldState, modifier: Modifier = Modifier, enabled: Boolean = true, textStyle: TextStyle = LocalTextStyle.current, labelPosition: TextFieldLabelPosition = TextFieldLabelPosition.Attached(), label: @Composable TextFieldLabelScope.() -> Unit? = null, placeholder: @Composable () -> Unit? = null, leadingIcon: @Composable () -> Unit? = null, trailingIcon: @Composable () -> Unit? = null, prefix: @Composable () -> Unit? = null, suffix: @Composable () -> Unit? = null, supportingText: @Composable () -> Unit? = null, isError: Boolean = false, inputTransformation: InputTransformation? = null, textObfuscationMode: TextObfuscationMode = TextObfuscationMode.RevealLastTyped, textObfuscationCharacter: Char = StylishObfuscationCharacter, keyboardOptions: KeyboardOptions = KeyboardOptions( autoCorrectEnabled = false, keyboardType = KeyboardType.Password, ), onKeyboardAction: KeyboardActionHandler? = null, onTextLayout: Density.(getResult: () -> TextLayoutResult?) -> Unit? = null, shape: Shape = TextFieldDefaults.shape, colors: TextFieldColors = TextFieldDefaults.colors(), contentPadding: PaddingValues = if (label == null || labelPosition is TextFieldLabelPosition.Above) { TextFieldDefaults.contentPaddingWithoutLabel() } else { TextFieldDefaults.contentPaddingWithLabel() }, interactionSource: MutableInteractionSource? = null)

A secure single-line text field for password-like input, wrapping the Material 3 SecureTextField with the theme's defaults.

Link copied to clipboard
fun StylishSlider(value: Float, onValueChange: (Float) -> Unit, modifier: Modifier = Modifier, enabled: Boolean = true, valueRange: ClosedFloatingPointRange<Float> = 0f..1f, steps: Int = 0, onValueChangeFinished: () -> Unit? = null, colors: SliderColors = SliderDefaults.colors( thumbColor = MaterialTheme.colorScheme.primary, activeTrackColor = MaterialTheme.colorScheme.primary, inactiveTrackColor = MaterialTheme.colorScheme.surfaceVariant, ), interactionSource: MutableInteractionSource? = null)

A slider for selecting a single value from a continuous or stepped range, wrapping the Material 3 Slider with Stylish defaults.

Link copied to clipboard
fun StylishSpacer(spacing: Dp = StylishTheme.dimensions.itemSpacing, modifier: Modifier = Modifier)

A vertical spacing element that inserts a fixed-height gap between siblings, backed by the Stylish Rhythm spacing scale. Use the convenience factories (StylishItemSpacer, StylishContentSpacer, StylishSectionSpacer) for the standard vertical steps, or pass a custom spacing for one-off gaps. For horizontal gaps, use StylishHorizontalSpacer or StylishInlineSpacer.

Link copied to clipboard
fun StylishSpeedDial(expanded: Boolean, onExpandedChange: (Boolean) -> Unit, modifier: Modifier = Modifier, fabIcon: @Composable () -> Unit = { Icon(Icons.Default.Add, contentDescription = null) }, direction: SpeedDialDirection = SpeedDialDirection.Up, actionCount: Int = 0, spacing: Dp = StylishTheme.dimensions.itemSpacing, fabSize: Dp = DefaultStylishDimensions.fabSize, fabContainerColor: Color? = null, fabContentColor: Color? = null, onActionClick: (Int) -> Unit = {}, actions: @Composable SpeedDialScope.(index: Int) -> Unit)

A floating action button that expands a fan of actions around itself when tapped, mirroring Material UI's SpeedDial.

Link copied to clipboard
fun StylishSwitch(checked: Boolean, onCheckedChange: (Boolean) -> Unit?, modifier: Modifier = Modifier, enabled: Boolean = true, colors: SwitchColors = SwitchDefaults.colors(), interactionSource: MutableInteractionSource? = null)

A toggle switch for turning a single option on or off, wrapping the Material 3 Switch so it can be themed consistently with the rest of Stylish UI. Use a switch when the change takes effect immediately (e.g. enabling a setting); for mutually exclusive choices prefer StylishRadioButton, and for independent yes/no marks prefer StylishCheckbox.

Link copied to clipboard
fun StylishTooltip(text: String, modifier: Modifier = Modifier, containerColor: Color = MaterialTheme.colorScheme.inverseSurface, contentColor: Color = MaterialTheme.colorScheme.inverseOnSurface, shape: Shape = RoundedCornerShape(4.dp), textStyle: TextStyle = MaterialTheme.typography.bodySmall, placement: TooltipPlacement = TooltipPlacement.Bottom, delayMillis: Int = 500, content: @Composable () -> Unit)

A tooltip that shows contextual information when the anchor is hovered or focused — the Material Design 3 tooltip counterpart.

Link copied to clipboard
fun StylishTriStateCheckbox(state: ToggleableState, onClick: () -> Unit?, modifier: Modifier = Modifier, enabled: Boolean = true, colors: CheckboxColors = CheckboxDefaults.colors(), interactionSource: MutableInteractionSource? = null)

A tri-state checkbox for expressing partial selection, wrapping the Material 3 TriStateCheckbox so it can be themed consistently with the rest of Stylish UI.

Link copied to clipboard
fun StylishVerticalDivider(modifier: Modifier = Modifier, thickness: Dp = StylishTheme.dimensions.outlineWidth, color: Color = MaterialTheme.colorScheme.outlineVariant)

A vertical rule styled with the Stylish hairline outline. Wraps VerticalDivider with StylishTheme.dimensions.outlineWidth as the default thickness and MaterialTheme.colorScheme.outlineVariant as the default color.

Link copied to clipboard
fun StylishVisuallyHidden(modifier: Modifier = Modifier, content: @Composable () -> Unit)

A visually hidden element that remains accessible to screen readers — the web "Visually Hidden" pattern from Chakra UI.